<template>
  <div>
    <div class="usersCase" v-for="item in petCommentList" :key="item.id">
      <img src="https://m.moguvet.com/_nuxt/img/5786c21.png" alt="" />
      <div class="userCasecontent">
        <p>
          {{ item.user.nickname }}
          <van-rate
            v-model="item.star_tag"
            :size="15"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </p>
        <p>
          <span>{{ item.content }}</span>
        </p>
        <p>{{ item.created_at }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getComments } from "../../API";
import { useCount } from "../../store/index";
let store = useCount();
let user_id = ref("");
user_id.value = store.params.user_id;
let page = ref();
page.value = store.params.page;
let limit = ref("");
limit.value = store.params.limit;

// 宠主评价接口
let petCommentList = ref([]);
let getPetComments = async () => {
  let { data } = await getComments({
    user_id: store.params.user_id,
    page: page.value,
    limit: limit.value,
  });
  petCommentList.value = data.data.list;
  // console.log(petCommentList.value);
  // console.log(data.data);
};
getPetComments();
</script>
<style scoped>
.usersCase {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding: 60px 0;
}
.usersCase img {
  width: 50px;
  height: 50px;
  margin-right: 30px;
}
.userCasecontent {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 32px;
}
.userCasecontent p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
}
.userCasecontent p:nth-of-type(2) {
  width: 100%;
  padding: 30px 40px;
  margin: 25px 0;
  background-color: #fafafa;
  box-sizing: border-box;
  font-size: 28px;
  color: #8e8e8e;
  border-radius: 20px;
}
.userCasecontent p:nth-of-type(2) span {
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 3; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.userCasecontent p:nth-of-type(3) {
  color: #d3d3d3;
  font-size: 24px;
}
</style>